<template>
  <!-- 视频 -->
  <h1>Educational Videos</h1>
  <div>
    <show_nine_class />
    <div v-if="videos.length > 0">
      <h2>Video List</h2>
      <div class="video-container">
        <div v-for="video in videos" :key="video.id" class="video-item">
          <video :src="video.video_file" controls style="width: 100%;"></video>
        </div>
      </div>
    </div>
    <div v-else>
      <p>No videos available.</p>
    </div>
  </div>
</template>

<script setup>
import show_nine_class from '../Jump-router-one/show_nine_class.vue'
import { onMounted, ref } from "vue"
import axios from "axios"

const videos = ref([])

onMounted(() => {
  axios.get('http://localhost:8000/app/video/')
    .then(res => {
      console.log(res.data)
      // 假设后端返回的视频列表中每个视频对象都有一个 video_file 字段，包含视频文件的 URL
      videos.value = res.data
    })
})
</script>

<style scoped>
.video-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 项目之间的间距 */
  justify-content: center; /* 使视频居中显示 */
}

.video-item {
  flex: 1 1 300px; /* 每个视频项的最大宽度为 300px，最小宽度为 300px */
  max-width: 400px; /* 最大宽度为 400px */
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 8px; /* 圆角效果 */
  overflow: hidden; /* 隐藏溢出的内容 */
}
</style>
